<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bilibili下载器</title>
  <link rel="stylesheet" href="css/popup.css">
</head>
<body>
  <div class="container">
    <header>
      <h1>Bilibili下载器</h1>
    </header>
    
    <div id="videoInfo" class="card">
      <div class="placeholder" id="loading">
        <p>请在Bilibili视频页面使用此扩展...</p>
      </div>
      
      <div class="video-details" style="display: none;">
        <div class="video-cover">
          <img id="videoCover" src="" alt="视频封面">
        </div>
        <div class="video-title">
          <h2 id="videoTitle"></h2>
          <p id="videoUploader"></p>
        </div>
      </div>
    </div>
    
    <div class="download-options card" id="downloadOptions" style="display: none;">
      <h3>下载选项</h3>
      <div class="form-group">
        <label for="formatSelect">视频格式</label>
        <select id="formatSelect">
          <option value="mp4">MP4</option>
          <option value="mp3">仅音频 (MP3)</option>
        </select>
      </div>
      
      <div class="form-group">
        <label for="qualitySelect">视频质量</label>
        <select id="qualitySelect">
          <option value="1080">1080P</option>
          <option value="720">720P</option>
          <option value="480">480P</option>
          <option value="360">360P</option>
        </select>
      </div>
      
      <div class="form-group">
        <label>下载路径</label>
        <p id="downloadPath" class="download-path">使用浏览器默认下载路径</p>
        <button id="choosePathBtn" class="secondary-btn">设置路径</button>
      </div>
      
      <button id="downloadBtn" class="main-btn">开始下载</button>
    </div>
    
    <div class="download-progress card" id="downloadProgress" style="display: none;">
      <h3>下载进度</h3>
      <div class="progress-container">
        <div class="progress-bar">
          <div class="progress" id="progressBar"></div>
        </div>
        <div class="progress-info">
          <span id="progressPercent">0%</span>
          <span id="downloadSpeed">0 KB/s</span>
        </div>
        <div class="time-info">
          <span id="timeRemaining">剩余时间: 计算中...</span>
        </div>
      </div>
      <button id="cancelBtn" class="secondary-btn">取消下载</button>
    </div>
    
    <div class="download-list card">
      <h3>下载列表</h3>
      <div id="emptyDownloadList" class="placeholder">
        <p>暂无下载记录</p>
      </div>
      <ul id="downloadList"></ul>
    </div>
    
    <footer>
      <button id="settingsBtn" class="icon-btn" title="设置">⚙️</button>
      <button id="helpBtn" class="icon-btn" title="帮助">❓</button>
    </footer>
  </div>
  
  <script src="js/popup.js"></script>
</body>
</html> 